<!-- 添加产品 -->
<template>
    <div class="page-box h100 display-flex czbj">

        <p class="title-label">{{iscompile?"编辑":"添加"}}产品</p>
        <div class="kjknsertw">
            <n-form ref="formRef" label-width="120" :inline="false" size="normal" label-placement="left" :model="formValue"
                :rules="rules">
                <n-grid :cols="24" :x-gap="20">
                    <n-form-item-gi span="24" label="产品标题:" path="title" class="mt20">
                        <n-input v-model:value="formValue.title" type="text" placeholder="请输入产品标题" size="medium"
                            clearable></n-input>
                    </n-form-item-gi>
   

                    <n-form-item-gi span="24" label="产品封面:" path="cover" class="mt20">
                        <div class="kjjjmsertwe">
                            <div class="kjjjsertwwx" v-for="(item, idx) in jhhjer" :key="idx">
                                <img :src="item" />
                                <i class="iconfont dx-closefill sfdgdgty" @click="closesert(idx)"></i>
                                <div class="jjnxeertrtw vertical-center">
                                    <p>
                                        <i class="iconfont dx-left cf fz32 b" @click="kjnmse(idx, 1)"> </i>
                                        <i class="iconfont dx-right cf fz30 ml10" @click="kjnmse(idx, 2)"> </i>
                                    </p>
                                </div>
                            </div>
                            <div class="logo-context vertical-center ab" @click="photoShowModal = true">
                                <span>点击上传产品封面</span>
                            </div>
                        </div>
                    </n-form-item-gi>
                 
                    <n-form-item-gi span="12" label="产品分类:"  class="mt20">
                      <n-cascader 
                        v-model:value="formValue.classify" 
                        placeholder="请选择产品分类" 
                        :options="classifyoptions"
                        check-strategy="child" 
                        size="medium" 
                        label-field="cate_name"
                        value-field="id"
                        @update:value="cachaserw" />
                    </n-form-item-gi>
                    <n-form-item-gi span="12" label="是否为热门:" path="" class="mt20">
                        <n-radio-group v-model:value="formValue.hot" name="radiogroup">
                            <n-space>
                                <n-radio :value="1">
                                    是
                                </n-radio>
                                <n-radio :value="2">
                                    否
                                </n-radio>
                            </n-space>
                        </n-radio-group>
                    </n-form-item-gi>
                    <n-form-item-gi span="24" label="详情介绍:" path="" class="mt20">
                        <div class="details-box">
                            <tinymce ref="tinymceref"></tinymce>
                        </div>
                        <div class="operating-button  mt20">
                            <n-button size="medium" type="primary" @click="addcpfun">{{iscompile?"保存":"添加"}}产品</n-button>
                            <n-button size="medium" @click="callBack" class="ml10">返回</n-button>

                        </div>
                    </n-form-item-gi>
                </n-grid>
            </n-form>
        </div>

        <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>产品封面</div>
            </template>
            <div>
                <photoGallery @getImg="getImg" :types="'产品cover' + Userid"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModal = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
                </div>
            </template>
        </n-modal>
    </div>
</template>
<script lang='ts' setup>
import { dxget, dxpost, callBack,qurl } from "../../util";
import { ref } from "vue";
import photoGallery from "../../components/util/photoGallery";
import tinymce from "../../components/util/tinymce.vue"
const cz = qurl()
const photoShowModal = ref()
const classifyoptions = ref()
const tinymceref = ref()
const Userid = ref(localStorage.Userid)
const jhhjer = ref([])
const formRef = ref()
const iscompile = ref(false) // true为编辑的状态
const apiurl="skzn/product"
const formValue = ref({
    title: "",//标题
    productFeature: "",//产品特点
    yjfl:"",
    cover: "",//产品封面
    classify: "",
    hot: 2,//1为热门 2不是热门
    particulars: "" //详情
})


const rules = {
    title: {
        required: true,
        message: '输入产品标题',
        trigger: 'blur'
    }, cover: {
        required: true,
        message: '请上传产品封面',
        trigger: 'blur'
    }
}
let jjnmnxe = "";
const getImg = (data) => {
    jjnmnxe = data;
};
const setImg = () => {
    jhhjer.value.push(jjnmnxe)
    formValue.value.cover = jhhjer.value.join(",")
    photoShowModal.value = false;
};

const closesert = (idx) => {
    jhhjer.value.splice(idx, 1)
    formValue.value.cover = jhhjer.value.join(",")
}
const kjnmse = (idx, type) => {
    if (type == 1 && idx > 0) {
        [jhhjer.value[idx - 1], jhhjer.value[idx]] = [jhhjer.value[idx], jhhjer.value[idx - 1]]
    }
    console.log(jhhjer.value.length < idx);
    if (type == 2 && (jhhjer.value.length - 1) > idx) {
        [jhhjer.value[idx + 1], jhhjer.value[idx]] = [jhhjer.value[idx], jhhjer.value[idx + 1]]
    }
}
const getfl = async () => {
    const { data }: any = await dxget("dxgjAdmin/getfls?&roleId=79")
    classifyoptions.value = data
}
getfl()
const cachaserw = (data) => {
    console.log(data);
    let fjid = ""
    classifyoptions.value.map(a=>{
      a.children.map(b=>{
        if(b.id==data){
          fjid = a.id
        }
      })
    })
    formValue.value.yjfl = fjid
}
const addcpfunser = async () => {
    formValue.value.particulars = tinymceref.value.getContent()
    formValue.value['detailedbrief'] = tinymceref.value.gettext().trim().slice(0,100)
    const { errno }: any = await dxpost(apiurl, formValue.value,iscompile.value?"put":"post")
    if (errno == 0) {
        window.$message.success("操作成功！")
        callBack()
    }
}
const addcpfun = (e) => {
    e.preventDefault();
    formRef.value.validate((errors) => {
        if (!errors) {
            addcpfunser()
        }
    });
}
const initData = async()=>{
    const {data}:any = await dxget(apiurl,{id:cz.id})
    console.log(data);
    formValue.value = data
    jhhjer.value = data.cover.split(",")
    tinymceref.value.setContent(data.particulars)
    cachaserw(data.classify)
}
if(cz.id){
    iscompile.value = true
    initData()
}


</script>
<style scoped>
.details-box {
    width: 1200px;
    height: 600px;
}

.page-box {
    overflow: auto;
    padding-bottom: 88px;
}
</style>